<!--
 * @Author: daidai
 * @Date: 2022-01-12 14:23:32
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-09 14:47:24
 * @FilePath: \web-pc\src\pages\big-screen\view\home.vue
-->
<template>

  <!-- <div id="index" ref="appRef" class="index_home" :class="{ pageisScale: isScale }"> -->
  <ScaleScreen
      :width="1760"
      :id="fullscreenElementId"
      :height="1080"
      class="scale-wrap"
      :selfAdaption="true"
  >
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <!-- 头部 s -->
        <div class="d-flex jc-center title_wrap">
          <div class="zuojuxing"></div>
          <div class="youjuxing"></div>
          <div class="guang"></div>
          <div class="d-flex jc-center">
            <div class="title">
              <span class="title-text">南浔智慧助餐数据驾驶舱</span>
            </div>
          </div>
          <div class="timers" style="color: #1CDBFE;padding-right: 20px">
            {{ dateYear }} {{ dateWeek }} {{ dateDay }}
            <span style="margin-left: 10px;cursor: pointer" @click="toggleFullScreen">
               <svg t="1694677626375" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="1711" id="mx_n_1694677626375" width="16" height="16"><path
                   d="M145.066667 85.333333h153.6c25.6 0 42.666667-17.066667 42.666666-42.666666S324.266667 0 298.666667 0H34.133333C25.6 0 17.066667 8.533333 8.533333 17.066667 0 25.6 0 34.133333 0 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666666s42.666667-17.066667 42.666666-42.666666V145.066667l230.4 230.4c17.066667 17.066667 42.666667 17.066667 59.733334 0 17.066667-17.066667 17.066667-42.666667 0-59.733334L145.066667 85.333333z m170.666666 563.2L162.133333 802.133333l-76.8 76.8V725.333333C85.333333 699.733333 68.266667 682.666667 42.666667 682.666667s-42.666667 17.066667-42.666667 42.666666v256c0 25.6 17.066667 42.666667 42.666667 42.666667h256c25.6 0 42.666667-17.066667 42.666666-42.666667s-17.066667-42.666667-42.666666-42.666666H145.066667l76.8-76.8 153.6-153.6c17.066667-17.066667 17.066667-42.666667 0-59.733334-17.066667-17.066667-42.666667-17.066667-59.733334 0z m665.6 34.133334c-25.6 0-42.666667 17.066667-42.666666 42.666666v153.6l-76.8-76.8-153.6-153.6c-17.066667-17.066667-42.666667-17.066667-59.733334 0-17.066667 17.066667-17.066667 42.666667 0 59.733334l153.6 153.6 76.8 76.8H725.333333c-25.6 0-42.666667 17.066667-42.666666 42.666666s17.066667 42.666667 42.666666 42.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666666z m0-682.666667h-256c-25.6 0-42.666667 17.066667-42.666666 42.666667s17.066667 42.666667 42.666666 42.666666h153.6l-76.8 76.8-153.6 153.6c-17.066667 17.066667-17.066667 42.666667 0 59.733334 17.066667 17.066667 42.666667 17.066667 59.733334 0l153.6-153.6 76.8-76.8v153.6c0 25.6 17.066667 42.666667 42.666666 42.666666s42.666667-17.066667 42.666667-42.666666v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z"
                   fill="#1CDBFE" p-id="1712"></path></svg>
             </span>
          </div>
        </div>
        <div style="margin-top: 20px">

          <el-row gutter="20">
            <el-col :span="6">
              <toDayData></toDayData>
              <CustomerAnalysis style="margin-top: 15px"></CustomerAnalysis>
              <orderTop style="margin-top: 15px"></orderTop>
            </el-col>
            <el-col :span="12">
              <SummaryData></SummaryData>
              <SaleData></SaleData>
              <PassengerFlow></PassengerFlow>
            </el-col>
            <el-col :span="6">
              <PaymentMethod></PaymentMethod>
              <DiningMethods style="margin-top: 20px"></DiningMethods>
              <NewOrder style="margin-top: 20px"></NewOrder>
            </el-col>
          </el-row>

        </div>
        <!-- 头部 e-->
        <!-- 内容  s-->

        <!-- 内容 e -->
      </div>
    </div>

  </ScaleScreen>


  <!-- </div> -->
</template>

<script>
import {formatTime} from "@/utils";

import toDayData from "@/views/MealComponents/toDayData.vue";
import ScaleScreen from "@/components/scale-screen/scale-screen.vue";
import CustomerAnalysis from "@/views/MealComponents/CustomerAnalysis.vue";
import orderTop from "@/views/MealComponents/orderTop.vue"
import PaymentMethod from '@/views/MealComponents/PaymentMethod.vue'
import DiningMethods from "@/views/MealComponents/DiningMethods.vue";

import SummaryData from "@/views/MealComponents/SummaryData.vue";
import SaleData from "../../MealComponents/SaleData.vue";
import PassengerFlow from "../../MealComponents/PassengerFlow.vue";
import NewOrder from "@/views/MealComponents/NewOrder.vue"
// export default {
//   components: {  ScaleScreen,toDayData,CustomerAnalysis,orderTop ,PaymentMethod,DiningMethods,SummaryData,SaleData,PassengerFlow,NewOrder},

export default {
  components: {
    ScaleScreen,
    toDayData,
    CustomerAnalysis,
    orderTop,
    PaymentMethod,
    DiningMethods,
    NewOrder,
    SummaryData,
    SaleData,
    PassengerFlow
  },
  data() {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      fullscreenElementId: 'fullscreenElementIds'
    };

  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  computed: {},
  created() {
  },
  mounted() {
    this.timeFn();
    this.cancelLoading();


  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    toggleFullScreen() {
      const element = document.getElementById(this.fullscreenElementId);

      if (element) {
        if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
          // 如果已经处于全屏模式，则退出全屏
          this.exitFullScreen();
        } else {
          // 否则，进入全屏
          this.enterFullScreen(element);
        }
      }
    },
    enterFullScreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
    },
    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    },
    showSetting() {
      // this.$refs.setting.init();
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      let timer = setTimeout(() => {
        this.loading = false;
        clearTimeout(timer);
      }, 500);
    },
  },
};
</script>

<style lang="scss">
.scale-wrap {
  color: #d3d6dd;
  //width: 1920px;
  //height: 1080px;
  overflow: auto;
  margin: 0;
  // &.pageisScale {
  //     position: absolute;
  //     top: 50%;
  //     left: 50%;
  //     transform: translate(-50%, -50%);
  //     transform-origin: left top;
  // }
  .bg {
    width: 100%;
    height: 100%;
    padding: 16px 16px 10px 16px;
    box-sizing: border-box;
    background-image: url("../../../assets/img/bg.png");
    background-size: cover;
    background-position: center center;
    overflow: auto;
  }

  .host-body {
    height: 100%;
overflow: auto;
    .title_wrap {
      height: 60px;
      background-image: url("../../../assets/img/top.png");
      background-size: cover;
      background-position: center center;
      position: relative;
      margin-bottom: 4px;

      .guang {
        position: absolute;
        bottom: -26px;
        background-image: url("../../../assets/img/guang.png");
        background-position: 80px center;
        width: 100%;
        height: 56px;
      }

      .zuojuxing,
      .youjuxing {
        position: absolute;
        top: -2px;
        width: 140px;
        height: 6px;
        background-image: url("../../../assets/img/juxing1.png");
      }

      .zuojuxing {

        left: 11%;
      }

      .youjuxing {
        right: 11%;
        transform: rotate(180deg);
      }

      .timers {
        position: absolute;
        right: 0;
        top: 30px;
        font-size: 18px;
        display: flex;
        align-items: center;

        .blq-icon-shezhi02 {
          cursor: pointer;
        }
      }
    }

    .title {
      position: relative;
      // width: 500px;
      text-align: center;
      background-size: cover;
      color: transparent;
      height: 60px;
      line-height: 46px;

      .title-text {
        background-image: linear-gradient(#BBEBF6, #00EAFF);
        -webkit-background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
        font-family: dpFont;
        font-size: 56px;
      }
    }
  }


}


</style>
